<template>
	<div class="inviterChangeMsg">
		<inviter-search @conditions="getConditions" />

		<!-- 表格 -->
		<div class="table_box">
			<el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" border style="width: 100%;">
				<el-table-column prop="merchName" label="商户名称" />
				<el-table-column prop="merchPhone" label="联系电话" />
				<el-table-column prop="address" label="商户总部地址" />
				<el-table-column prop="financingParty" label="出资方">
					<template slot="header" slot-scope="scope">
						<span>出资方</span>
						<el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
							<div slot="content">出资方指优惠折扣或活动优惠的钱由谁承担</div>
							<i class="el-icon-question" />
						</el-tooltip>
					</template>
					<template slot-scope="scope">
						<div v-if="scope.row.afterFinancingParty">
							<p>{{ scope.row.financingParty == 1 ? '修改前：本商户' : '修改前：合作商户' }}</p>
							<p v-if="scope.row.financingParty != 2">{{ scope.row.needAgree ? '（需要同意）' : '（不需要同意）' }}</p>
							<p>{{ scope.row.afterFinancingParty == 1 ? '修改后：本商户' : '修改后：合作商户' }}</p>
							<p v-if="scope.row.afterFinancingParty != 2">{{ scope.row.afterNeedAgree ? '（需要同意）' : '（不需要同意）' }}</p>
						</div>
						<p v-else>无</p>
					</template>
				</el-table-column>
				<el-table-column prop="changeBefore" label="优惠信息（优惠折扣/抽佣比例/积分抵扣比例）">
					<template slot-scope="scope">
						<div v-if="scope.row.changeMsg.afterDiscount || scope.row.changeMsg.afterRakeRate || scope.row.changeMsg.afterDeductionRatio">
							<p>{{ scope.row.changeMsg.before }}</p>
							<p>{{ scope.row.changeMsg.after }}</p>
						</div>
						<div v-else>无</div>
					</template>
				</el-table-column>
				<el-table-column prop="changeTime" label="修改时间" />
				<el-table-column prop="trueTime" label="确定时间">
					<template slot-scope="scope">
						<div v-if="scope.row.trueTime">
							<p>{{ scope.row.trueTime }}</p>
							<p v-if="!scope.row.needAgree && scope.row.financingParty == 1 && scope.row.afterFinancingParty == null" style="color: red;">【系统自动同意】</p>
						</div>
						<div v-else>无</div>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" />
			</el-table>
		</div>

		<pag-ination :page-total="pagTotal" @pageNum="getPageNum" @pageSize="getPageSize" />
	</div>
</template>

<script>
import { queryModifyRecord } from '@/api/business';
import inviterSearch from '../../components/inviterSearch/change.vue';
import pagInation from '../../components/pagInation/index.vue';
export default {
	components: {
		'inviter-search': inviterSearch,
		'pag-ination': pagInation
	},
	data() {
		return {
			/* 查询 */
			conditions: {
				businessName: '',
				mobile: '',
				status: '',
				pageNum: 1,
				pageSize: 10
			},
			pagTotal: null,

			/* 表格 */
			tableData: [
				{
					merchName: '商家 1',
					merchPhone: '18924578589',
					address: '上海市普陀区金沙江路',
					// 出资方
					stake: [
						{
							value: '0',
							label: '请选择出资方'
						},
						{
							value: '1',
							label: '本商户'
						},
						{
							value: '2',
							label: '合作商户'
						}
					],
					financingParty: '',
					changeMsg: {
						before: '8折/5%',
						after: '7折/6%'
					},
					//       changeBefore: '8折/5%',
					// changeAfter: '7折/6%',
					changeTime: '2022-02-08 12:22:21',
					trueTime: '2022-02-08 12:22:21',
					status: '待同意'
				}
			]
		};
	},
	mounted() {
		this.queryModifyRecordFun();
	},
	methods: {
		/* 查询条件 */
		getConditions(conditions) {
			const { merchName, merchPhone, statusOptionsValue } = conditions;
			const conditionsVal = {
				businessName: merchName,
				mobile: merchPhone,
				pageNum: 1,
				pageSize: this.conditions.pageSize,
				status: statusOptionsValue // 0:待同意, 1:已同意, 2: 已拒绝
			};
			this.conditions = conditionsVal;
			console.log('查询条件', this.conditions);
			this.queryModifyRecordFun();
		},
		// 获取分页
		getPageNum(val) {
			this.conditions.pageNum = val;
			this.queryModifyRecordFun();
		},
		getPageSize(val) {
			this.conditions.pageSize = val;
			this.queryModifyRecordFun();
		},

		/* 修改记录 */
		queryModifyRecordFun() {
			queryModifyRecord(this.conditions).then(res => {
				console.log('修改记录', res);
				if (res.code == 0) {
					this.pagTotal = res.data.total;
					const data = res.data.list;
					const tableData = [];
					data.forEach(el => {
						const dataItem = {
							merchName: el.joinBusinessName,
							merchPhone: el.joinMobilePhone,
							address: el.address,
							financingParty: el.financingParty,
							afterFinancingParty: el.afterFinancingParty,
							needAgree: el.needAgree,
							afterNeedAgree: el.afterNeedAgree,
							changeMsg: {
								before: `修改前：${el.discount ? el.discount + '折' : '无'} / ${el.rakeRate ? el.rakeRate + '%' : '无'} / ${
									el.deductionRatio ? el.deductionRatio + '%' : '无'
								}`,
								afterDiscount: el.afterDiscount,
								afterRakeRate: el.afterRakeRate,
								afterDeductionRatio: el.afterDeductionRatio,
								after: `修改后：${el.afterDiscount ? el.afterDiscount + '折' : '无'} / ${el.afterRakeRate ? el.afterRakeRate + '%' : '无'} / ${
									el.afterDeductionRatio ? el.afterDeductionRatio + '%' : '无'
								}`
							},
							changeTime: el.createTime,
							trueTime: el.confirmTime,
							status: el.status == 0 ? '待同意' : el.status == 1 ? '已同意' : '已拒绝'
							// cooperation: el.isCooperate == 0 ? '是' : '否'
						};
						tableData.push(dataItem);
					});
					this.tableData = tableData;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.inviterChangeMsg {
	.table_box {
		width: 100%;
		overflow: hidden;
		padding: 20px;
		background-color: white;
	}
}
</style>
